<template>
  <view class="container">
    <view class="box">
      <view class="spinner"> </view>
      <image class="logo" :src="logo"></image>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { config } from '@/config/env';
  const props = defineProps({
    size: {
      type: Number,
      default: 80,
    },
    color: {
      type: String,
      default: '#2f416f',
    },
    logo: {
      type: String,
      default: config.custom.loading_logo,
    },
  });

  const loadingSize = props.size + 'rpx';
  const logoSize = props.size * 0.8 + 'rpx';
</script>

<style lang="scss" scoped>
  $loading-size: v-bind(loadingSize);
  $logo-size: v-bind(logoSize);

  @keyframes rotate {
    0% {
      transform: rotate(360deg);
    }
  }

  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    // background: lightsalmon;

    .box {
      position: relative;

      .spinner {
        width: $loading-size;
        height: $loading-size;
        border-radius: 50%;
        border: 1rpx solid v-bind(color);
        border-top: 1rpx solid transparent;
        border-bottom: 1rpx solid transparent;
        animation: rotate 1s ease infinite;
      }

      .logo {
        width: $logo-size;
        height: $logo-size;
        border-radius: 50%;
        position: absolute;
        top: 10%;
        left: 10%;
      }
    }
  }
</style>
